<template>
  <div class="px-5 py-3" v-loading="loading">
    <p v-show="loading" class="text-3xl text-center font-bold">加载中...</p>
    <template v-if="detail">

      <h1 class="text-2xl text-bold text-white bg-blue-400 p-2 mb-5">
        {{ detail.name }} ({{ detail.fundcode }})
      </h1>
      <el-row :gutter="40" class="px-5 mb-5">
        <el-col :span="12">
          <el-row :gutter="30" class="mb-3">
            <el-col :span="8">
              <p class="text-gray-600 text-sm mb-2">
                <span class="text-blue-400">净值估算</span>
                <span>{{ detail.gztime || "--" }}</span>
              </p>
              <p class="text-bold text-2xl">
                {{ detail.gsz || "--" }}
                <rate-text v-if="detail.gsz" :value="`+${detail.gszzl}`" class="text-sm"></rate-text>
              </p>
            </el-col>
            <el-col :span="8">
              <p class="text-gray-600 text-sm mb-2">
                <span class="text-blue-400">单位净值</span>
                <span>({{ detail.jzrq }})</span>
              </p>
              <p class="text-bold text-2xl">
                {{ detail.dwjz }}
              </p>
            </el-col>
            <el-col :span="8">
              <p class="text-gray-600 text-sm mb-2">
                <span class="text-blue-400">累计净值</span>
              </p>
              <p class="text-bold text-2xl">
                {{ detail.ljjz }}
              </p>
            </el-col>
          </el-row>
          <el-descriptions title="" class="bg-transparent">
            <el-descriptions-item label="近1月:">
              <rate-text :value="detail.m1" :per="false"></rate-text>
            </el-descriptions-item>
            <el-descriptions-item label="近3月:">
              <rate-text :value="detail.m3" :per="false"></rate-text>
            </el-descriptions-item>
            <el-descriptions-item label="近6月:">
              <rate-text :value="detail.m6" :per="false"></rate-text>
            </el-descriptions-item>
            <el-descriptions-item label="近1年:">
              <rate-text :value="detail.y1" :per="false"></rate-text>
            </el-descriptions-item>
            <el-descriptions-item label="近3年:">
              <rate-text :value="detail.y3" :per="false"></rate-text>
            </el-descriptions-item>
            <el-descriptions-item label="成立来:">
              <rate-text :value="detail.fn" :per="false"></rate-text>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions title="基金信息" class="bg-transparent">
            <el-descriptions-item label="基金类型:" label-class-name="font-bold">{{ detail.type }}</el-descriptions-item>
            <el-descriptions-item label="基金规模:" label-class-name="font-bold">{{ detail.scale }}</el-descriptions-item>
            <el-descriptions-item label="基金经理:" label-class-name="font-bold">{{ detail.manager }}</el-descriptions-item>
            <el-descriptions-item label="成立日:" label-class-name="font-bold">{{ detail.fn_date }}</el-descriptions-item>
            <el-descriptions-item label="管理人:" label-class-name="font-bold">{{ detail.company }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-row :gutter="40" class="px-5 mb-5">
        <el-col :span="16">
          <el-tabs>
            <el-tab-pane label="盘中实时净值估算图">
              <el-image style="width: 100%; height: 400px" :src="jzgspic" :preview-src-list="[jzgspic]" fit="contain" />
            </el-tab-pane>
            <el-tab-pane label="基金净值走势图">
              <el-image style="width: 100%; height: 400px" :src="jzpic" :preview-src-list="[jzpic]" fit="contain" />
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="8">
          <el-tabs>
            <el-tab-pane label="股票持仓">
              <!-- 股票名称	持仓占比	涨跌幅 -->
              <el-table :data="detail.stock10.data" table-layout="fixed">
                <el-table-column label="股票名称">
                  <template #default="{ row }">
                    <span class="text-blue-400 text-sm">
                      {{ row[0] }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="持仓占比">
                  <template #default="{ row }">
                    <span class="text-bold text-sm">
                      {{ row[1] }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="涨跌幅">
                  <template #default="{ row }">
                    <span class="text-blue-400 text-sm">
                      <rate-text class="text-sm" :value="row[2]" :per="false"></rate-text>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
              <p class="mb-2 mt-2 text-sm ml-2">
                <span class="text-blue-400">前十持仓占比合计: </span><span class="text-gray-400 text-bold">{{
                  detail.stock10.sum
                }}</span>
              </p>
              <p class="text-gray-400 text-sm ml-2">
                {{ detail.stock10.end_date }}
              </p>
            </el-tab-pane>
            <el-tab-pane label="债券持仓">
              <el-table :data="detail.bond10.data" table-layout="fixed">
                <el-table-column label="债券名称">
                  <template #default="{ row }">
                    <span class="text-blue-400 text-sm">
                      {{ row[0] }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="持仓占比">
                  <template #default="{ row }">
                    <span class="text-bold text-sm">
                      {{ row[1] }}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
              <p class="mb-2 mt-2 text-sm ml-2">
                <span class="text-blue-400">前五持仓占比合计: </span><span class="text-gray-400 text-bold">{{
                  detail.bond10.sum
                }}</span>
              </p>
              <p class="text-gray-400 text-sm ml-2">
                {{ detail.bond10.end_date }}
              </p>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <CompareLine :code="detail.fundcode" />
        </el-col>
        <el-col :span="8">
          <el-tabs>
            <el-tab-pane label="历史净值">
              <!-- 日期	单位净值	累计净值	日增长率 -->
              <el-table table-layout="fixed" :data="detail.jzhistory">
                <el-table-column label="日期">
                  <template #default="{ row }">
                    <span class="text-sm">
                      {{ row[0] }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="单位净值">
                  <template #default="{ row }">
                    <span class="text-bold text-sm">
                      {{ row[1] }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="累计净值">
                  <template #default="{ row }">
                    <span class="text-bold text-sm">
                      {{ row[2] }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="日增长率">
                  <template #default="{ row }">
                    <span class="text-bold text-sm">
                      <rate-text :value="row[3]" :per="false"></rate-text>
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import { fundDetail, FundDetailRes, fundJzgsPic, fundJzPic } from "/@/api/fund";
import CompareLine from "/@/views/Detail/_Components/CompareLine.vue";

const props = defineProps<{
  code: string;
}>();

const loading = ref(false);
const detail = ref<FundDetailRes>();

const getDetail = async () => {
  loading.value = true;
  try {
    let {
      data: { Data },
    } = await fundDetail(props.code);
    detail.value = Data;
  } finally {
    loading.value = false;
  }
};

const jzgspic = fundJzgsPic(props.code);
const jzpic = fundJzPic(props.code);

getDetail();
</script>

<style lang="postcss" scoped>
::v-deep(.el-descriptions.bg-transparent .el-descriptions__body) {
  background-color: transparent;
}
</style>